<template>
  <!-- bgDesc-item:{{ item }} -->
  <!-- props.modelValue:{{ modelValue }} -->
  <div class="itemBox" style="position: relative">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">{{ title }}
          <!-- <span style="color: red;font-size: 24rpx;margin-right: 10rpx;">*</span> -->
        </p>
      </div>

      <div class="rightBox" v-if="projectConfig.name == 'xin'">
        <div class="right" @click="isShowHistory = true">
          <i class="iconfont ai-icon-lishi"></i>
          <p class="closeText">文案记录</p>

        </div>
        <!-- <div class="right" @click="generationBgc.prompt = ''">
          <i class="iconfont ai-icon-qingchuwenben"></i>
          <p class="closeText">清除文本</p>
        </div> -->
        <div class="right" @click="isExpand = !isExpand">
          <i class="iconfont" :class="[isExpand ? 'ai-icon-shangsanjiao' : 'ai-icon-xiantiaoshangsanjiao']"
            style="font-size: 26rpx;"></i>
        </div>



        <!-- <div class=" right" @click="remove">
            <i class="iconfont ai-icon-qingchuwenben"></i>
            <p class="closeText">清除文本</p>
        </div> -->
      </div>
    </div>
    <div class="desc-list">
      <div class="selectHistory">
        <div class="selectHistory">
          <selectHistory v-model:show="isShowHistory" :id="item?.id"></selectHistory>
        </div>
      </div>
      <!-- 文本域 -->
      <div v-if="isExpand" style="position: relative" class="desc-list">
        <!-- <textarea :value="generationBgc.prompt" class="textarea" placeholder="客厅有灰色沙发、现代灯具和抽象画作，餐桌上摆放白色餐具和玻璃杯"
        placeholder-class="taPlaceHolder" @input="inputChange"></textarea> -->
        <div class="flex between" style="position: relative;">
          <div class="title">场景描述</div>

          <!-- <div class="right" @click="isShowHistory = true">
            <i class="iconfont ai-icon-lishi"></i>
            <p class="closeText">文案记录</p>
          </div> -->

        </div>
        <textarea v-model="bgDesc.scne" class="textarea" maxlength="-1" placeholder="如：室内、室外、橱窗前、草坪上等"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="title">主体描述</div>
        <textarea v-model="bgDesc.primary" maxlength="-1" class="textarea" placeholder="如：女生坐在沙发上"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="title">元素添加</div>
        <textarea v-model="bgDesc.element" maxlength="-1" class="textarea" placeholder="如：沙发上摆着玩具熊"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="title">色调</div>
        <textarea v-model="bgDesc.color" maxlength="-1" class="textarea" placeholder="如：如：暖色调、冷色调、室外阳光明媚、深棕地板等"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="title">光影</div>
        <textarea v-model="bgDesc.light" maxlength="-1" class="textarea" placeholder="如：阳光、灯光、柔和光、自然光、左边光源等"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="title">风格描述</div>
        <textarea v-model="bgDesc.style" maxlength="-1" class="textarea" placeholder="如：欧式、现实、轻奢、现代、中国风、喜庆等"
          placeholder-class="taPlaceHolder" @input="inputChange"></textarea>
        <div class="selectHistory">
          <div class="selectHistory">
            <selectHistory v-model:show="isShowHistory" :id="item?.id"></selectHistory>
          </div>
        </div>
      </div>
      <div v-else>
        <textarea :value="bgDescStr" class="textarea twoTextarea" maxlength="-1" :placeholder="`请描述你想生成的${title}`"
          placeholder-class="taPlaceHolder" @input="inputSummaryChange"></textarea>
      </div>

    </div>
  </div>


  <!-- <div class="itemBox">
    <div class="titleBox">
      <div class="leftBox">
        <i class="leftIcon"></i>
        <p class="title">背景描述词
          <span style="color: red;font-size: 24rpx;margin-right: 10rpx;">*</span>
        </p>
      </div>
      <div class="rightBox">
        <div class="right" @click="isShowHistory = true">
          <i class="iconfont ai-icon-lishi"></i>
          <p class="closeText">文案记录</p>
        </div>
        <div class="right" @click="removePrompt">
          <i class="iconfont ai-icon-qingchuwenben"></i>
          <p class="closeText">清除文本</p>
        </div>
      </div>
    </div>

  </div> -->
</template>

<script setup>
import { ref, computed, onMounted, watch, inject } from 'vue';
import { usePaintingStore } from "@/store";
import { onLoad } from "@dcloudio/uni-app";
let item = ref({});
const paintingStore = usePaintingStore();
import projectConfig from '@/config/project/index.js'

import selectHistory from "@/components/selectHistory/index.vue";
let props = defineProps({

  modelValue: {
    type: Object,
    default: () => {
      return {}
    }
  },
  title: {
    type: String,
    default: '背景描述词'
  }
});
let isExpand = ref(false);
let emit = defineEmits(['change']);
// const generationBgc = paintingStore.generationBgc;

let bgDesc = ref({
  scne: '',
  primary: '',
  element: '',
  color: '',
  light: '',
  style: ''
});
let isShowHistory = ref(false);
let bgDescStr = ref('');
onMounted(() => {

  item.value.id = inject('id');
  if (props.modelValue.promptObj && Object.keys(props.modelValue.promptObj).length != 0) {
    bgDesc.value = props.modelValue.promptObj;

  }

});
onLoad((e) => {
  e.item && (item.value = JSON.parse(e.item));
});
watch(() => bgDescStr.value, (val) => {
  emit('change', {
    bgDescStr: bgDescStr.value,
    bgDesc: bgDesc.value
  })
}, {
  deep: true
})
// 这个不能去掉，否则当用户在历史记录里切换历史记录的时候，会导致数据不同步
watch(() => props.modelValue, (val) => {
  bgDescStr.value = val.prompt;
  bgDesc.value = val.promptObj;
}, {
  deep: true
});
function inputSummaryChange(e) {
  const text = e.detail.value;
  bgDescStr.value = text;
  bgDesc.value = {
    scne: text
  }
  // generationBgc.prompt = text;
  // generationBgc.promptObj = {
  //   scne: text
  // }
}
function removePrompt() {

}
function inputChange() {
  bgDescStr.value = Object.values(bgDesc.value).filter(str => {
    return str !== '';
  }).join(',');
  console.log('bgDescStr.valu', bgDescStr.value);

  // generationBgc.prompt = bgDescStr.value;
  // generationBgc.promptObj = bgDesc.value;
  // emit('change', {
  //   bgDescStr: bgDescStr.value,
  //   bgDesc: bgDesc.value
  // })
}
</script>

<style lang="scss" scoped>
.desc-list {
  .title {
    font-size: 24rpx;
    color: rgba(212, 212, 220, 1);

  }
}

.right {
  display: flex;
  align-items: center;
  padding: 10rpx;
  font-size: 24rpx;
  color: var(--a-three-text-color);

  .iconfont {
    margin-right: 6rpx;
  }

  &:first-child {
    margin-right: 20rpx;
  }
}

.twoTextarea {
  height: 250rpx !important;
}

.textarea {
  box-sizing: border-box;
  width: 100%;
  height: 130rpx;
  display: block;
  margin: 0 auto;
  padding: 24rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  font-size: 28rpx;
  color: var(--a-one-text-color);

  &.s {
    height: 86prx !important;
    min-height: 86rpx;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
  }


  ::v-deep .taPlaceHolder {
    color: var(--a-three-text-color);
  }
}

.input {
  box-sizing: border-box;
  width: 100%;

  display: block;
  margin: 0 auto;
  padding: 24rpx;
  background: var(--a-main-box-bg-color);
  border-radius: 20rpx;
  font-size: 28rpx;
  color: var(--a-one-text-color);

  &.s {
    height: 86prx !important;
    min-height: 86rpx;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
  }


  ::v-deep .taPlaceHolder {
    color: var(--a-three-text-color);
  }
}

// 绘图记录
.selectHistory {
  position: absolute;
  top: 28rpx;
  left: 0;
}
</style>